<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01cookie</title>
</head>

<body>
    <input type="text" id="tex">
    <input type="button" value="存cookie" id="btn1">
    <input type="button" value="取cookie" id="btn2">
    <input type="button" value="删cookie" id="btn3">
    <div id="box"></div>
</body>
<script src="../common.js"></script>
<script>
    /*
        cookie:前后端都可以读写cookie
            * 必须是环境方式才能使用：有通信
            * 存储在浏览器里面的数据
                * 每个域名只能存储50个(不同的浏览器略有不同)https://www.cnblogs.com/phpfeng/p/9261704.html
                * 会话级别的数据存储：关掉浏览器就没有了(默认效果会话级别)
                * 纯文本(字符串格式)存在硬盘中

        操作：
            * 增
            * 删
            * 改
            * 查

        语法：document.cookie = name=value[;expires=date][;path=路径][;domain=域名]
            * domain=http://www.baidu.com 允许百度访问该页面的cookie
    */

    // document.cookie = 'name=xiaoyouyu';
    (function () {

        let tex = document.getElementById('tex');
        let btn1 = document.getElementById('btn1');
        let btn2 = document.getElementById('btn2');
        let btn3 = document.getElementById('btn3');
        let box = document.getElementById('box');
        // setcookie('like', '水煮鱼', 5);
        //存数据到cookie里面
        btn1.onclick = () => {
            //存cookie
            setCookie('adr', tex.value, 5);//设置cookie
        }


        btn2.onclick = () => {
            //获取cookie
            let res = getCookie('age');
            console.log(res);
        }

        btn3.onclick = () => {
            //删除
            removeCookie('adr');//把失效时间设置成过去的时间，就自动失效，并被浏览器回收
        }

        //封装函数

        //设置/修改
        function setCookie(key, val, iday) {
            //key 键名，val 键值， iday 多少天后失效
            let time = new Date();
            let today = time.getDate();//日
            time.setDate(today + iday);
            document.cookie = key + '=' + val + ';expires=' + time + ';path=/';
        }

        //获取
        function getCookie(key) {
            let str = document.cookie;
            console.log(str);//name=小虎; age=18; adr=广东广州
            let arr = str.split('; ');
            console.log(arr);
            for (let item of arr) {
                let arr2 = item.split('=');
                if (key == arr2[0]) {
                    return arr2[1];
                }
            }
        }

        //删除cookie
        function removeCookie(key) {
            setCookie(key, '', -1);
        }


    })();
</script>

</html>